<template>
  <nav class="navbar-inverse">
    <div class="navbar container-center">
      <a :href="getMicroPath('#/')" class="header-logo">
        <img class="logo-image" src="../assets/images/dog-logo-sm.png" />
        <span class="logo-text">小工具集(DTools)</span>
      </a>
      <ul class="nav navbar-nav nav-bar-group">
        <li :class="activeUrl === getMicroPath('/') ? 'active' : ''" class="nav-bar-item"><a :href="getMicroPath('#/')">首页</a></li>
        <li :class="activeUrl === getMicroPath('/tools') ? 'active' : ''" class="nav-bar-item"><a :href="getMicroPath('#/tools')">工具列表</a></li>
      </ul>
      <span @click="handleChangeNav($event)" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </span>
    </div>
  </nav>
</template>

<script>
/* 导航组件 */
export default {
  props: {
    activeUrl: {
      type: String,
      default: '/'
    }
  },
  data () {
    return {
      isToggleAtive: false
    }
  },
  methods: {
    handleChangeNav (e) {
      this.isToggleAtive = !this.isToggleAtive
      let cls = 'is-toggle-active'
      let par = this.$el
      if (this.isToggleAtive) {
        par.classList.add(cls)
      } else {
        par.classList.remove(cls)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header-logo {
  float: left;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  margin-right: 24px;
  padding: 4px 0;
  height: 50px;
  line-height: 42px;
  .logo-image {
    margin-right: 12px;
  }
}
.navbar-right{
  margin-right: 0;
}
.navbar-inverse{
  position: relative;
  z-index: 5;
  .navbar {
    border: none;
    border-radius: 0;
  }
}
</style>

<style lang="less">
.navbar-toggle {
  display: none;
  position: relative;
  float: right;
  padding: 8px;
  margin-right: -10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  &:hover,&:active {
    outline: none;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
    & + .icon-bar {
      margin-top: 4px;
    }
  }
}
.is-toggle-active {
  .navbar {
    position: relative;
    .nav-bar-group {
      display: block;
      position: absolute;
      top: 48px;
      right: 0;
      background: #324156;
    }
    .nav-bar-item {
      display: block;
      float: none;
      text-align: center;
      &.active,&:hover {
        z-index: 9;
      }
    }
    .item-text {
      display: block;
      white-space: nowrap;
    }
  }
}
@media (max-width: 1024px) {
  .navbar-toggle {
    display: block;
  }
  .nav-bar-group {
    display: none;
  }
}
</style>
